<template>
  <div class="login-content">
    <div class="login-left">
      <img src="../../assets/imgs/calculator.png" alt="" />
    </div>
    <div class="login-right">
      <p class="title">欢迎来到</p>
      <p class="title" style="margin-top: 20px">兴远贸易管理系统</p>
      <span class="line"></span>
      <div class="login-from">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="loginForm"
          label-width="0px"
        >
          <el-form-item label="" prop="account">
            <div class="userName">
              <p>账号/用户名</p>
              <el-input
                v-model="ruleForm.account"
                class="inp-userName"
                placeholder="请输入账号/用户名"
              ></el-input>
            </div>
          </el-form-item>
          <el-form-item label="" prop="password">
            <div class="userName" style="margin-top: 40px">
              <p>登录密码</p>
              <el-input
                v-model="ruleForm.password"
                class="inp-userName"
                placeholder="请输入登录密码"
                show-password
              ></el-input>
            </div>
          </el-form-item>
        </el-form>
        <el-button
          type="primary"
          @click="submit"
          :loading="loading"
          class="sunmit-btn"
          >{{ loading ? '登录中' : '登录' }}</el-button
        >
      </div>
    </div>
  </div>
</template>
<script>
import { getToken } from '@/utils/token-util';
import { login } from '@/api/login';
export default {
  name: 'Login',
  data() {
    return {
      loading: false,
      ruleForm: {
        account: '',
        password: ''
      },
      rules: {
        account: [
          {
            required: true,
            message: '请输入账号',
            trigger: 'blur',
            type: 'string'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur',
            type: 'string'
          }
        ]
      }
    };
  },
  computed: {
    // 当前语言
    language() {
      return this.$i18n.locale;
    }
  },
  created() {
    if (getToken()) {
      this.goHome();
    }
  },

  methods: {
    /* 提交 */
    submit() {
      this.$refs['loginForm'].validate((valid) => {
        if (!valid) {
          return false;
        }
        this.loading = true;
        login(this.ruleForm)
          .then((msg) => {
            this.loading = false;
            this.$message.success(msg);
            this.goHome();
            // this.signalR.initSignalR();
          })
          .catch((e) => {
            this.loading = false;
            this.$message.error(e.message);
          });
      });
    },
    /* 跳转到首页 */
    goHome() {
      this.$router.push(this.$route.query.from ?? '/').catch(() => {});
    },
    /* 切换语言 */
    changeLanguage(lang) {
      this.$i18n.locale = lang;
      localStorage.setItem('i18n-lang', lang);
    },
    /* 更换图形验证码 */
    // changeCaptcha() {
    //   // 这里演示的验证码是后端返回base64格式的形式, 如果后端地址直接是图片请参考忘记密码页面
    //   VerificationCode(1)
    //     .then((data) => {
    //       this.captcha = data.Base64Str;
    //       // 实际项目后端一般会返回验证码的key而不是直接返回验证码的内容, 登录用key去验证, 可以根据自己后端接口修改
    //       this.text = data.Code;
    //       // 自动回填验证码, 实际项目去掉这个
    //       // this.form.code = this.text;
    //       this.$refs?.form?.clearValidate();
    //     })
    //     .catch((e) => {
    //       this.$message.error(e.message);
    //     });
    // },
    //初始化signalr
    init() {
      this.connection = new signalR.HubConnectionBuilder();
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .el-input__inner {
  // width: 444px;
  // height: 64px;
  background: transparent !important;
  // border-radius: 32px;
  border: none;
  padding: 0 0;
  color: #ffffff;
  // padding: 0 50px;
}
// ::v-deep .el-input--medium .el-input__icon {
//   font-size: 21px;
//   padding: 0 8px;
// }
// ::v-deep .el-form-item__error {
//   margin-left: 5px;
//   font-size: 14px;
// }
.login-content {
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  background: url('../../assets/imgs/background.png') no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 100px;
  padding-right: 300px;
  .login-left {
    display: flex;
    align-items: center;
  }
  .login-right {
    display: flex;
    flex-direction: column;
    .title {
      font-size: 48px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 1;
      color: #ffffff;
      // letter-spacing: 5px;
    }
    .line {
      width: 97px;
      height: 5px;
      background-color: #ffffff;
      margin-top: 5px;
    }
    .login-from {
      margin-top: 60px;
      .userName {
        p {
          font-size: 16px;
          line-height: 20px;
          color: #ffffff;
          letter-spacing: 1px;
        }
        .inp-userName {
          margin-top: 10px;
          width: 385px;
          border: none;
          background: transparent;
          border-bottom: solid 1px #d7d7d7;
          font-size: 17px;
          color: #ffffff;
        }
        .inp-userName input::placeholder {
          margin-top: 10px;
          width: 335px;
          border: none;
          background: transparent;
          border-bottom: solid 1px #d7d7d7;
          font-size: 17px;
          color: #ffffff;
        }
      }
      .sunmit-btn {
        margin-top: 75px;
        border: none;
        width: 385px;
        height: 62px;
        background-image: linear-gradient(0deg, #3c5fd3 0%, #326feb 100%),
          linear-gradient(#d7d7d7, #d7d7d7);
        background-blend-mode: normal, normal;
        border-radius: 6px;
        font-size: 20px;
        line-height: 20px;
        letter-spacing: 0px;
        color: #ffffff;
      }
    }
  }
}

// p .login-wrapper:before {
//   content: '';
//   background-color: rgba(0, 0, 0, 0.2);
//   position: absolute;
//   top: 0;
//   left: 0;
//   right: 0;
//   bottom: 0;
// }

// .login-form {
//   margin: 0 auto;
//   width: 360px;
//   max-width: 100%;
//   padding: 25px 30px;
//   position: relative;
//   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
//   box-sizing: border-box;
//   border-radius: 4px;
//   z-index: 2;
// }

// .login-form-right .login-form {
//   margin: 0 15% 0 auto;
// }

// .login-form-left .login-form {
//   margin: 0 auto 0 15%;
// }

// .login-form h4 {
//   text-align: center;
//   margin: 0 0 25px 0;
// }

// .login-form > .el-form-item {
//   margin-bottom: 25px;
// }

// .login-input-group {
//   display: flex;
//   align-items: center;
// }

// .login-input-group >>> .el-input {
//   flex: 1;
// }

// .login-captcha {
//   height: 38px;
//   width: 102px;
//   margin-left: 10px;
//   border-radius: 4px;
//   border: 1px solid #dcdfe6;
//   text-align: center;
//   cursor: pointer;
// }

// .login-captcha:hover {
//   opacity: 0.75;
// }

// .login-btn {
//   margin-top: 30px;
//   display: block;
//   width: 100%;
//   background-color: #ff6824;
//   border-radius: none;
//   height: 70px;
//   border-radius: 15px;
// }
// .btn {
//   display: inline-block;
//   width: 90%;
// }
// .login-oauth-icon {
//   color: #fff;
//   padding: 5px;
//   margin: 0 10px;
//   font-size: 18px;
//   border-radius: 50%;
//   cursor: pointer;
// }

// .login-copyright {
//   color: #eee;
//   padding-top: 20px;
//   text-align: center;
//   position: relative;
//   z-index: 1;
// }

// @media screen and (min-height: 550px) {
//   .login-form {
//     position: absolute;
//     top: 50%;
//     left: 50%;
//     transform: translateX(-50%);
//     margin-top: -220px;
//   }

//   .login-form-right .login-form,
//   .login-form-left .login-form {
//     left: auto;
//     right: 15%;
//     transform: translateX(0);
//     margin: -220px auto auto auto;
//   }

//   .login-form-left .login-form {
//     right: auto;
//     left: 15%;
//   }

//   .login-copyright {
//     position: absolute;
//     bottom: 20px;
//     right: 0;
//     left: 0;
//   }
// }

// @media screen and (max-width: 768px) {
//   .login-form-right .login-form,
//   .login-form-left .login-form {
//     left: 50%;
//     right: auto;
//     transform: translateX(-50%);
//     margin-right: auto;
//   }
// }

// ::v-deep .el-input {
//   margin-top: 30px;
//   border: none;
//   width: 90%;
// }
// ::v-deep .el-input__inner {
//   border: none;
//   background-color: #f8f8f8;
//   height: 70px !important;
// }
// .remanber {
//   float: left;
//   margin-left: 20px;
// }
// ::v-deep .el-input__icon {
//   color: #909399;
//   font-weight: 600;
//   font-size: 18px;
//   // margin-right: 10px;
//   // margin-left: 10px;
// }
// ::v-deep .login-btn[data-v-a49090ce] {
//   font-size: 18px;
// }
// ::v-deep [data-v-a49090ce] .el-input__inner {
//   font-size: 18px;
// }

// .login-captcha {
//   height: 38px;
//   width: 102px;
//   margin-left: 10px;
//   border-radius: 4px;
//   border: 1px solid #dcdfe6;
//   text-align: center;
//   cursor: pointer;
// }

// .login-captcha:hover {
//   opacity: 0.75;
// }
</style>
